<template>
  <div class="body">
    <div class="title">{{ title }} [答卷详情]</div>
    <div class="container">
      <div v-for="(item, index) in list" :key="index">
        <div class="table-title">
          <span class="num"> 第{{ index + 1 }}题：</span
          ><span class="sub-title">{{ item.label }}</span>
          <span
            class="type-title"
            v-if="item.type == 10 || item.type == 25 || item.type == 20"
          >
            [填空题]</span
          >
          <span v-if="item.type == 30" class="type-title">[单选题]</span>
          <span v-if="item.type == 40" class="type-title">[多选题]</span>
          <span v-if="item.type == 125" class="type-title">[手写签名]</span>
          <span v-if="item.type == 90" class="type-title">[日期选择题]</span>
                    <span v-if="item.type == 60" class="type-title">[下拉选择题]</span>

          <span v-if="item.type == 70" class="type-title">[图片上传题]</span>
          <span v-if="item.type == 80" class="type-title">[文件上传题]</span>
                              <span v-if="item.type == 27" class="type-title">[富文本题]</span>

          <span v-if="item.type == 95" class="type-title">[时间选择题]</span>
          <span v-if="item.type == 97" class="type-title"
            >[日期时间选择题]</span
          >
          <span v-if="item.type == 100" class="type-title">[滑块评分题]</span>
          <span v-if="item.type == 50" class="type-title">[星级评价题]</span>
        </div>

        <div v-for="(it, idx) in listAnswer" :key="idx">
          <span
            class="answer"
            v-if="
              it.questionCode == item.code &&
              item.type != 125 &&
              item.type != 70 &&
                            item.type != 27 &&

              item.type != 80
            "
            >{{ it.questionOptionName }}{{ it.answerContent
            }}{{ it.files }}</span
          >
          <img
            v-if="it.questionCode == item.code && item.type == 125"
            :src="item.answerContent"
            width="200px"
          />
          <div style="display: flex">
            <img
              v-if="it.questionCode == item.code && item.type == 70"
              v-for="(itFile, ix) in it.files"
              :src="itFile"
              :key="ix"
              width="100"
            />
          </div>
          <div
            v-if="it.questionCode == item.code && item.type == 80"
            v-for="(itFile, ix) in it.files"
          >
            <el-link :href="itFile" target="_blank">{{ itFile }}</el-link>
          </div>

           <div
            v-if="it.questionCode == item.code && item.type == 27"
            v-html="it.answerContent" style="border:1px solid #dedede;padding:20px"
          >
            
          </div>
        </div>
        <el-divider border-style="dotted"></el-divider>
      </div>
    </div>
  </div>
</template>
<script>
import { httpService } from "@/utils/httpService";

export default {
  name: "Analysis",
  components: {},
  mounted() {
    this.user = JSON.parse(localStorage.getItem("user"));
    this.uuid = this.$route.query.p;
    this.answerUuid = this.$route.query.q;

    this.queryByUUId();
    this.getList();
  },
  data() {
    return {
      user: {},
      skip: true,
      title: "",
      questionnaireId: 0,
      list: [],
      dialogTableVisible: false,
      selectItem: {},
      selectIndex: "",
      page: 0,
      pageSize: 10,
      total: 0,
      limit: 10,
      listAnswer: [],
      uuid: "",
      answerUuid: "",
    };
  },
  methods: {
    goAnswerDetail(uuid) {
      let routeData = this.$router.resolve({
        name: "AnswerDetail",
        query: {
          p: uuid,
        },
      });
      window.open(routeData.href, "_blank");
    },
    tableIndex(index) {
      return this.page * this.pageSize + index + 1;
    },
    catDetail(e, index) {
      this.dialogTableVisible = true;
      this.selectItem = e;
      this.selectIndex = "第" + (index + 1) + "题：";
      this.getList();
    },
    getList() {
      //根据题目id查询答案列表
      httpService(
        "/javaApi/qtAnswer/list/0/1000",
        {
          uuid: this.answerUuid,
        },

        "get"
      ).then((data) => {
        for (var i = 0; i < data.list.length; i++) {
          if (data.list[i].answerType == 90) {
            if (
              data.list[i].answerContent != null &&
              data.list[i].answerContent.length > 10
            ) {
              data.list[i].answerContent = data.list[i].answerContent.substring(
                0,
                10
              );
            }
          }
        }
        this.listAnswer = data.list;
        console.log(this.listAnswer);
      });
    },
    // 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
    changePageSize(size) {
      this.pageSize = size;
      this.limit = size;
      this.getList();
    },

    // 改变页码，page：回调参数，表示当前选中的“页码”
    changeCurrentPage(page) {
      this.page = page;
      this.getList();
    },
    queryByUUId() {
      httpService(
        "/javaApi/qtQuestionnaire/queryByUUId",
        "uuid=" + this.uuid,
        "post"
      ).then((data) => {
        if (data != "") {
          this.title = data.title;
          this.questionnaireId = data.id;
          let upList = data.qtQuestions;
          this.list = upList;
        } else {
          this.$router.push({
            path: "/noFound",
          });
        }
      });
    },
    formatDate(row, column) {
      let data = row[column.property];
      let dt = new Date(data);
      let month = dt.getMonth() + 1;
      if (month < 10) {
        month = "0" + month;
      }
      let hours = dt.getHours();
      if (hours < 10) {
        hours = "0" + hours;
      }
      let mDate = dt.getDate();
      if (mDate < 10) {
        mDate = "0" + mDate;
      }
      let minutes = dt.getMinutes();
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      let seconds = dt.getSeconds();
      if (seconds < 10) {
        seconds = "0" + seconds;
      }
      return (
        dt.getFullYear() +
        "-" +
        month +
        "-" +
        mDate +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    },
  },
};
</script>
<style scoped>
.num {
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #262626;
}
.sub-title {
  font-size: 16px;
  color: #262626;
  font-weight: 400;
}
.type-title {
  font-size: 16px;
  color: #a6a6a6;
  margin-left: 10px;
}
.body {
  background: #f2f2f2;
}
.container {
  width: 70%;
  background: white;
  padding: 40px 50px 100px 50px;
  margin: 0 auto;
  min-height: calc(100vh - 208px);
}
.title {
  font-size: 26px;
  padding: 20px;
  border-bottom: 1px solid #dedede;
  text-align: center;
  background: white;
  color: #409EFF;
}
.table-title {
  padding-bottom: 20px;
  padding-top: 0px;
}
.answer {
  font-size: 15px;
  color: #666666;
}
</style>
<style >
.el-dialog {
  position: relative;
  margin: 10% auto 50px;
  background: #ffffff;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
  box-sizing: border-box;
  width: 50%;
}
</style>